<div class="wrap">
  <div class="time">
    开始时间：
    <nz-date-picker nzFormat="yyyy-MM-dd" [(ngModel)]="startValue">
    </nz-date-picker>
    &nbsp;&nbsp;&nbsp;
    结束时间：
    <nz-date-picker nzFormat="yyyy-MM-dd" [(ngModel)]="endValue">
    </nz-date-picker>
    &nbsp;&nbsp;&nbsp;
    <button nz-button nzType="primary" (click)="search()"><i nz-icon nzType="search"></i>查询</button>
    &nbsp;
    <button nz-button nzType="primary" (click)="download()"><i nz-icon nzType="download"></i>导出</button>
  </div>
  <nz-tabset [(nzSelectedIndex)]="tabsIndex" (nzSelectedIndexChange)="tabsChange($event)">
    <nz-tab nzTitle="问题级别统计">
      <div [ngStyle]="tableScrollFullHeight">
        <div nz-row>
          <div nz-col nzSpan="16">
            <div class="m12">
              <nz-table #table1 class="problemTable" [nzFrontPagination]="false" [nzShowPagination]="false"
                nzSize="small" [nzLoadingDelay]="1000" [nzData]="dataTable1" nzBordered>
                <thead>
                  <tr>
                    <th nzAlign="center">序号</th>
                    <th nzAlign="center">部门</th>
                    <th nzAlign="center">I 级</th>
                    <th nzAlign="center">II 级</th>
                    <th nzAlign="center">III 级</th>
                    <th nzAlign="center">问题数量</th>
                    <th nzAlign="center">占比</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of table1.data;index as i">
                    <td nzAlign="center">{{+i+1}}</td>
                    <td nzAlign="center">{{data.WORKSHOPNAME}}</td>
                    <td nzAlign="center"><a (click)="detail(data,'I级','LEVEL')"
                        href="javascript:void(0)">{{data['I级']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'II级','LEVEL')"
                        href="javascript:void(0)">{{data['II级']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'III级','LEVEL')"
                        href="javascript:void(0)">{{data['III级']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'','LEVEL')"
                        href="javascript:void(0)">{{data.C}}</a>
                    </td>
                    <td nzAlign="center">{{data.PERCENT+'%'}}</td>
                  </tr>
                </tbody>
              </nz-table>
              <br>
              <div class="echartswrap" style="height:400px" id="echart_level"></div>
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="echartswrap" style="height:500px" id="echart1"></div>
          </div>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="问题类型统计">
      <div [ngStyle]="tableScrollFullHeight">
        <div nz-row>
          <div nz-col nzSpan="16">
            <div class="m12">
              <nz-table #table2 class="problemTable" [nzFrontPagination]="false" [nzShowPagination]="false"
                nzSize="small" [nzLoadingDelay]="1000" [nzData]="dataTable2" nzBordered>
                <thead>
                  <tr>
                    <th nzAlign="center">序号</th>
                    <th nzAlign="center">部门</th>
                    <th nzAlign="center">电源</th>
                    <th nzAlign="center">道岔</th>
                    <th nzAlign="center">轨道电路</th>
                    <th nzAlign="center">信号机</th>
                    <th nzAlign="center">电子设备</th>
                    <th nzAlign="center">电缆绝缘</th>
                    <th nzAlign="center">监测功能</th>
                    <th nzAlign="center">其它</th>
                    <th nzAlign="center">问题数量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of table2.data;index as i">
                    <td nzAlign="center">{{+i+1}}</td>
                    <td nzAlign="center">{{data.WORKSHOPNAME}}</td>
                    <td nzAlign="center"><a (click)="detail(data,'电源','TYPE')"
                        href="javascript:void(0)">{{data['电源']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'道岔','TYPE')"
                        href="javascript:void(0)">{{data['道岔']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'轨道电路','TYPE')"
                        href="javascript:void(0)">{{data['轨道电路']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'信号机','TYPE')"
                        href="javascript:void(0)">{{data['信号机']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'电子设备','TYPE')"
                        href="javascript:void(0)">{{data['电子设备']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'电缆绝缘','TYPE')"
                        href="javascript:void(0)">{{data['电缆绝缘']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'监测功能','TYPE')"
                        href="javascript:void(0)">{{data['监测功能']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'其它','TYPE')"
                        href="javascript:void(0)">{{data['其它']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'','TYPE')"
                        href="javascript:void(0)">{{data.C}}</a>
                    </td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="echartswrap" style="height:500px" id="echart2"></div>
          </div>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="线别统计">
      <div [ngStyle]="tableScrollFullHeight">
        <div nz-row>
          <div nz-col nzSpan="16">
            <div class="m12">
              <nz-table #table3 class="problemTable" [nzFrontPagination]="false" [nzShowPagination]="false"
                nzSize="small" [nzLoadingDelay]="1000" [nzData]="dataTable3" nzBordered>
                <thead>
                  <tr>
                    <th nzAlign="center">序号</th>
                    <th nzAlign="center">线别</th>
                    <th nzAlign="center">问题数量</th>
                    <th nzAlign="center">占比</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of table3.data;index as i">
                    <td nzAlign="center">{{+i+1}}</td>
                    <td nzAlign="center">{{data.NAME}}</td>
                    <td nzAlign="center"><a (click)="detail(data,'','LINE')"
                        href="javascript:void(0)">{{data.C}}</a>
                    </td>
                    <td nzAlign="center">{{data.PERCENT+'%'}}</td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="echartswrap" style="height:400px" id="echart3"></div>
          </div>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="车间统计">
      <div [ngStyle]="tableScrollFullHeight">
        <div nz-row>
          <div nz-col nzSpan="16">
            <div class="m12">
              <nz-table #table_cj class="problemTable" [nzFrontPagination]="false" [nzShowPagination]="false"
                nzSize="small" [nzLoadingDelay]="1000" [nzData]="dataTable4" nzBordered>
                <thead>
                  <tr>
                    <th nzAlign="center">序号</th>
                    <th nzAlign="center">部门</th>
                    <th nzAlign="center">电源</th>
                    <th nzAlign="center">道岔</th>
                    <th nzAlign="center">轨道电路</th>
                    <th nzAlign="center">信号机</th>
                    <th nzAlign="center">电子设备</th>
                    <th nzAlign="center">电缆绝缘</th>
                    <th nzAlign="center">监测功能</th>
                    <th nzAlign="center">其它</th>
                    <th nzAlign="center">未整改</th>
                    <th nzAlign="center">已销号</th>
                    <th nzAlign="center">问题数量</th>
                    <th nzAlign="center">占比</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of table_cj.data;index as i">
                    <td nzAlign="center">{{+i+1}}</td>
                    <td nzAlign="center">{{data.WORKSHOPNAME}}</td>
                    <td nzAlign="center"><a (click)="detail(data,'电源','TYPE')"
                        href="javascript:void(0)">{{data['电源']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'道岔','TYPE')"
                        href="javascript:void(0)">{{data['道岔']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'轨道电路','TYPE')"
                        href="javascript:void(0)">{{data['轨道电路']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'信号机','TYPE')"
                        href="javascript:void(0)">{{data['信号机']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'电子设备','TYPE')"
                        href="javascript:void(0)">{{data['电子设备']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'电缆绝缘','TYPE')"
                        href="javascript:void(0)">{{data['电缆绝缘']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'监测功能','TYPE')"
                        href="javascript:void(0)">{{data['监测功能']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'其它','TYPE')"
                        href="javascript:void(0)">{{data['其它']}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'sum_process','TYPE')"
                        href="javascript:void(0)">{{data.SUM_PROCESS}}</a></td>
                    <td nzAlign="center"><a (click)="detail(data,'sum_over','TYPE')"
                        href="javascript:void(0)">{{data.SUM_OVER}}</a>
                    </td>
                    <td nzAlign="center"><a (click)="detail(data,'','TYPE')"
                        href="javascript:void(0)">{{data.C}}</a>
                    </td>
                    <td nzAlign="center">{{data.PERCENT+'%'}}</td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="echartswrap" style="height:400px" id="echart_cj"></div>
          </div>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
</div>

<nz-modal nzMaskClosable="false" [(nzVisible)]="problemsVisible" nzTitle="问题详情" [nzBodyStyle]="{'padding':'5px 24px'}"
  [nzWidth]="1400" (nzOnCancel)="problemsOk()" (nzOnOk)="problemsOk()">
  <nz-table #table4 class="problemTable" nzSize="small" [nzScroll]="lockHeadScroll" [nzLoadingDelay]="1000"
    [nzData]="popTable" nzBordered>
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="50px">序号</th>
        <th nzAlign="center" nzWidth="5%">创建时间</th>
        <th nzAlign="center" nzWidth="8%">问题跟踪</th>
        <th nzAlign="center" nzWidth="8%">车站名称</th>
        <th nzAlign="center" nzWidth="8%">问题类型</th>
        <th nzAlign="center" nzWidth="5%">问题级别</th>
        <th nzAlign="center" nzWidth="15%">问题内容</th>
        <th nzAlign="center" nzWidth="5%">整改日期</th>
        <th nzAlign="center">整改信息</th>
        <th nzAlign="center" nzWidth="8%">责任部门</th>
        <th nzAlign="center" nzWidth="5%">责任人</th>
        <th nzAlign="center" nzWidth="8%">协助部门</th>
        <th nzAlign="center" nzWidth="5%">是否销号</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of table4.data;index as i">
        <td nzAlign="center">{{+i+1}}</td>
        <td nzAlign="center">{{data.createdate}}</td>
        <td nzAlign="center">{{data.new_status}}</td>
        <td nzAlign="center">{{data.stationname}}</td>
        <td>{{data.problemtype}}</td>
        <td nzAlign="center">{{data.new_problemlevel}}</td>
        <td><span style="word-break:break-all;">{{data.problem}}</span></td>
        <td nzAlign="center">{{data.rectdate}}</td>
        <td><span style="word-break:break-all;">{{data.handleinfoExport}}</span></td>
        <td nzAlign="center">{{data.orgnamesExport}}</td>
        <td nzAlign="center">{{data.handlersExport}}</td>
        <td nzAlign="center">{{data.assistorgname}}</td>
        <td nzAlign="center">{{data.new_cancle}}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-modal>